<template>
	<view class="recharge">
		<view class="item" v-for="(item, index) in orderList"  :key="index" @click="goTopup(item.id)">
			<view class="topBox flex_space_b">
				<view class="left">订单编号：{{item.order_sn}}</view>
				<view class="right">
					<view class="right">
						<text v-if="item.order_status == 2" class="orangeText">待支付</text>
						<text v-else-if="item.order_status == 1" class="orangeText">已下单</text>
						<text v-else-if="item.order_status == 3">已办理</text>
						<text v-else-if="item.order_status == 4" class="redText">已退款</text>
						<text v-else-if="item.order_status == 5" class="redText">已驳回</text>
					</view>
				</view>
			</view>
			<view class="content flex_space_b">
				<view class="content">{{item.set_name}}</view>
			</view>
			
			<view class="content flex_space_b">
				<view class="banli_title">充值号码：{{item.recharge_mobile}}</view>
				<view class="banli_title">￥{{item.recharge_amount}}</view>
			</view>
		</view>
		<view class="noContent"  v-if="orderList.length <= 0">
			<image class="noContentImage" src="@/static/empty.png" mode="widthFix"></image>
			<view class="text">没有相关记录~</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				orderList:[]
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData(){
				util.requestPost('user/getPreferentialOrder', {}, (res) => {
					if (res.code == 1) {
						this.orderList = res.data.list
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			goTopup (id) {
				uni.navigateTo({
					url: `/pages/my/rechargeOrder?order_id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.recharge {
	padding: 28rpx;
	.item {
		box-shadow: 0 0 8rpx rgba($color: #000000, $alpha: 0.2);
		border-radius: 20rpx;
		&:not(:last-of-type) {
			margin-bottom: 20rpx;
		}
		.topBox {
			font-size: 28rpx;
			line-height: 64rpx;
			padding: 20rpx 40rpx;
			border-bottom: $border-base;
			.left {
				
			}
			.right {
				font-size: 24rpx;
			}
		}
		.banli_title{
			margin-left: 10rpx;
			padding: 10rpx;
			font-size: 24rpx;
			font-weight: normal;
		}
		.content {
			margin-left: 10rpx;
			padding: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		
	}
	
}
</style>
